<template>
    <div :class="$style['form-container']">
        <el-form :inline="true" :class="$style['form-wrapper']" :model="searchForm">
            <el-form-item>
                <el-select v-model="searchForm.view_id" placeholder="自定义视图" @change="handleViewChange" clearable>
                    <el-option v-for="(item, index) in views" :key="index" :value="item.id"
                        :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="searchForm.device_name" placeholder="请输入设备名称" clearable />
            </el-form-item>
            <!-- <el-form-item>
                <el-select v-model="searchForm.cid" placeholder="全部子系统事件" clearable>
                    <el-option :label="item.event_name" :value="item.cid" v-for="(item, ind) in eventCidList"
                        :key="ind" />
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-select v-model="searchForm.status" placeholder="事件状态" clearable>
                    <el-option :value="1" label="未处理"></el-option>
                    <el-option :value="2" label="已处理"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchForm.event_type" placeholder="事件类型" clearable>
                    <el-option :label="item.name" :value="item.id" v-for="(item, ind) in eventTypeList" :key="ind" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchForm.event_level" placeholder="事件等级" clearable>
                    <el-option :label="item.name" :value="item.id" v-for="(item, ind) in eventLevelList" :key="ind" />
                </el-select>
            </el-form-item>
            <!--<el-form-item>
                <el-select v-model="searchForm.handle_result" placeholder="处理结果" clearable>
                    <el-option :label="item.name" :value="item.name" v-for="(item, index) in handleResult"
                        :key="index" />
                </el-select>
            </el-form-item>-->
            <el-form-item>
                <el-date-picker v-model="searchForm.event_time" type="datetimerange" range-separator="~"
                    format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" start-placeholder="事件发生时间"
                    end-placeholder="事件发生时间" />
            </el-form-item>
            <el-form-item v-if="fieldsView.includes('company')">
                <el-input v-model="searchForm.company" placeholder="请输入使用单位" clearable />
            </el-form-item>
            <el-form-item v-if="fieldsView.includes('recheck_status')">
                <el-select v-model="searchForm.recheck_status" placeholder="复核状态" clearable>
                    <el-option :value="1" label="未复核"></el-option>
                    <el-option :value="2" label="复核成功"></el-option>
                    <el-option :value="3" label="复核失败"></el-option>
                </el-select>
            </el-form-item>
            <!--<el-form-item>
                <el-input v-model="searchForm.username" placeholder="请输入事件处理用户" clearable />
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="searchForm.handle_time" type="datetimerange" range-separator="~"
                    format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" start-placeholder="事件处理时间"
                    end-placeholder="事件处理时间" />
            </el-form-item>
            <el-form-item style="margin-right: 15px;">
                <el-col :span="11">
                    <el-input-number v-model="searchForm.meters1" :precision="2" :step="0.1" placeholder="报警米数" />
                </el-col>
                <el-col :span="2" style="text-align: center">
                    <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                    <el-input-number v-model="searchForm.meters2" :precision="2" :step="0.1" placeholder="报警米数" />
                </el-col>
            </el-form-item>-->
            <el-form-item>
                <el-button type="primary" @click="emitsGetList()">搜索</el-button>
                <EventViewComponents ref="eventViewRef" :events="eventCidList" :levels="eventLevelList"
                    :results="handleResult" :types="eventTypeList" :modules="modules" :views="views" @search="search"
                    @updateView="updateView" />
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { fetchEventCid } from '@/api/event.services'
import { fetchViewBasic, fetchViewModules } from '@/api/view.services'
import EventViewComponents from './EventViewComponents.vue'
const eventViewRef = ref(null)
const emits = defineEmits(['getList'])
defineProps({
    eventLevelList: {
        type: Array,
        default: () => []
    },
    handleResult: {
        type: Array,
        default: () => []
    },
    eventTypeList: {
        type: Array,
        default: () => []
    },
    fieldsView: {
        type: Array,
        default: () => []
    }
})
const searchForm = ref({
    status: 1
})
const emitsGetList = () => {
    if (searchForm.value.view_id) {
        searchForm.value.views = views.value.find(item => item.id == searchForm.value.view_id).json
    } else {
        searchForm.value.views = []
    }
    emits('getList', searchForm.value)
}
const eventCidList = ref([])
const initCidList = async () => {
    const result = await fetchEventCid()
    if (result.code == 1) {
        eventCidList.value = result.data
    }
}
const views = ref([])
const initViews = async () => {
    searchForm.value.view_id = null
    const result = await fetchViewBasic({ type: 1, uid: localStorage.getItem('uid') })
    if (result.code == 1) {
        views.value = result.data
    }
}

const modules = ref([])
const initModules = async () => {
    const result = await fetchViewModules()
    if (result.code == 1) {
        modules.value = result.data
    }
}
const search = (form) => {
    searchForm.value.views = form
    emits('getList', searchForm.value)
}
const updateView = () => {
    initViews()
}
const handleViewChange = (value) => {
    if (!value) {
        eventViewRef.value.view_id = null
        eventViewRef.value.view_name = ''
        return
    }

    const item = views.value.find((item) => item.id == value)
    eventViewRef.value.view_id = item.id
    eventViewRef.value.view_name = item.name
}
onMounted(() => {
    initCidList()
    initViews()
    initModules()
})
</script>
<style lang="scss" module>
.form-container {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0 10px;
}

.form-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    & [class~='el-form-item'] {
        margin: 0;
        margin-right: 10px;
        height: 40px;

        & [class~='el-input'] {
            width: 150px;
        }

        & [class~='el-select'] {
            width: 150px;
        }

        & [class~='el-date-editor'] {
            width: 380px;
        }
    }
}
</style>
